
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'dialogCenter',
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      loading: false, isFirst: false,
      selfMsgList: [],
      userId: null,
    }
  },
  inject: ['activeCus'],
  components: {
    WxText: () => { return import('./wx_text.vue') },
    WxImage: () => { return import('./wx_image.vue') },
  },
  computed: {
    ...mapState([
      'loginInfo',
    ]),

  },
  watch: {
    "activeCus.value": {
      deep: true,
      handler: function (nv, ov) {
        if (nv.userId == ov.userId) { return }
        // console.log(`对象客户变化，需要请求该客户的聊天记录`)
        this.isFirst = true;
        this.selfMsgList.splice(0, this.selfMsgList.length)
        this.userId = nv.userId;
        this.ajaxMsg().then((res) => {
          this.initMsgList(res)
        })
      }
    },
    '$store.state.wsMsgFromApp': {// socket消息
      deep: true,
      handler: function (nv, ov) {
        if (nv.usersId == this.userId) {
          this.getWSMsg(nv);
        }
        return;
      }
    },
  },
  methods: {
    funTimeShow: function (k, keyName) {
      if (k > 0) {
        let $moment = this.$moment;
        let msgList = this.selfMsgList;
        let a = $moment(msgList[k - 1][keyName])
        let b = $moment(msgList[k][keyName])
        return $moment(a).diff(b, 'minutes') < -2;
      } else {
        return false
      }
    },
    returnMsgEnd() {
      setTimeout(() => {
        this.$refs.msgBox.scrollTop = this.$refs.msgBox.scrollHeight
      }, 300);
    },
    returnMsgStart() {
      setTimeout(() => { this.$refs.msgBox.scrollTop = 100 }, 300);
    },
    // 获取socket的消息
    getWSMsg(msg) {
      let addMsgList = {
        imgUrl: msg.imgUrl,
        nicheng: msg.nicheng,
        msgId: msg.msgId,//消息ID
        userId: msg.usersId,
        msgBody: msg.msgBody,
        type: msg.type,
        lastMsgTime: msg.createTimeDate,
        imgW: msg.imgW,
        imgH: msg.imgH,
        addTime: msg.addTime,
        isFromUser: msg.isFromUser,
        from: 'socket'
      }
      this.selfMsgList.push(addMsgList)
      //客户信息相同时将消息推送聊天区(右侧)
      this.returnMsgEnd()
    },

    initMsgList(arr) {
      arr.forEach((v, i, a) => {
        this.selfMsgList.push(v)
      })
      this.loading = false;
      this.isFirst = false;
      this.returnMsgEnd(300);
    },
    prependMsgList(arr) {
      let idList = this.selfMsgList.map((v, i, a) => {
        return v.id
      })
      arr.reverse().forEach((v, i, a) => {
        if (idList.includes(v.id)) { return }
        this.selfMsgList.unshift(v)
      })
      this.loading = false;
    },//前插入
    appendMsgList(msg) {
      if (msg.usersId != this.userId) { return };//非当前用户忽略
      this.selfMsgList.push(msg);
      this.returnMsgEnd(300);
    },//后插入
    ajaxMsg() {
      this.loading = true;
      let chatTime = (function (self) {
        if (self.selfMsgList.length > 0) {
          return self.selfMsgList[0].addTime
        } else {
          return null
        }
      })(this)
      let opt = {
        userId: this.userId,
        // employeeUserId:this.obj.employeeUserId,
        chatTime: chatTime,
        pageSize: 5,
      }
      return this.$api.getChatMsgs(opt).then((res) => {
        let arr;
        if (res.data.code == 200) {
          arr = Array.isArray(res.data.data) ? res.data.data : [];
        }
        return arr;
      })
    },
    scrollAjaxMsg() {
      if (this.userId == null) { return }
      if (this.$refs.msgBox.scrollTop > 0) { return }
      this.ajaxMsg().then((res) => {
        this.prependMsgList(res)
      })
    }
  }
}
